@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

/* Base styles */
body {
  /* background-color: #f5f5f5; */ /* Light gray background */
  /* background: linear-gradient(to bottom right, #f0e6ff, #e6f0ff, #e6fff0); */ /* Removed gradient from body */
  color: #333; /* Default text color */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: #333;
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: #e1251b; /* Theme red color for hover */
}

/* Container */
.container {
  max-width: 1200px; /* Adjust as needed based on target site */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;  /* Equivalent to px-4 in Tailwind for consistency */
  padding-right: 1rem; /* Equivalent to px-4 in Tailwind for consistency */
}

/* Element Plus overrides or specific component styles can go here */

/* Example: Ensure ElDropdown link doesn't have default blue */
.el-dropdown-link {
    color: inherit;
    cursor: pointer;
    outline: none;
}
.el-dropdown-link:hover {
    color: #e1251b;
}

/* Ensure App fills height */
html, body {
    height: 100%; /* Ensure base elements cover full height */
}

.app {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ensure footer stays down using viewport height */
    /* height: 100% removed as min-height: 100vh is generally preferred */
}
main.main {
    flex-grow: 1; /* Allow main content to take available space */
}

/* 自定义滚动条样式 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 过渡动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* 商品卡片悬停效果 */
.product-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover {
  transform: translateY(-4px);
} 